<template>
    <div class="auction warp">
      <div class="lots_type">
        <div class="table">
          <div class="tr_border">
                <div class="td_type">
                    拍卖会形式
                </div>
                <div class="td_all stateAll">
                    <div class="td_all_val" @click="shapeAll">全部</div>
                    <ul class="all_item_ul">
                        <li v-for="(val,i) in aucShapeList" :key="i" @click="shapeListChild(val.id,i)">
                            <span :class='{stateFoucs:flagXS==i}'>{{val.val}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tr_border">
                <div class="td_type">
                    拍卖会阶段
                </div>
                <div class="td_all stateAll">
                    <div class="td_all_val" @click="stateAll">全部</div>
                    <ul class="all_item_ul">
                        <li v-for="(val,i) in lotsStateList" :key="i" @click="stateListChild(val.id,i)">
                            <span :class='{stateFoucs:flagJD==i}'>{{val.val}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tr4">
                <div class="td_type">
                    开拍时间
                </div>
                <div class="td_all stateAll">
                    <div class="td_all_val" @click="timeAll">全部</div>
                    <ul class="all_item_ul">
                        <li v-for="(val,i) in lotsTimeList" :key="i" @click="timeListChild(val.id,i)">
                            <span :class='{stateFoucs:flagSJ==i}'>{{val.val}}</span>
                        </li>
                    </ul>
                    <div>
                        <el-date-picker
                        size="mini"
                        v-model="starttime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        @change="timeSE"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div class="lineNum"><span>盟拍网为你筛选到</span><span class="num_b">{{total}}</span><span>条相关结果</span></div>
                </div>
            </div>
        </div>
    </div>
    <el-empty v-if="emptyShow" :description=description :image-size='300'></el-empty> 
        <ul class="pai-item-list">
          <li v-for="item in aucData" :key="item.id" class="pai-item">
              <div class="link_wrap" @click="goAuctionDetail(item)">
                <el-card class="item_card" :body-style="{ padding: '0px' }">
                  <div class="image">
                    <img :src="item.auctionImageUrl" alt=""/>
                  </div>
                  
                  <div class="item_title">
                      &nbsp; {{item.auctionName}}
                    </div>
                  <div class="item_content">
                    <div class="item_money">
                      <p class="item_money_firm">拍卖企业：{{ item.companyName }}</p>
                      <div class="item_money_time">
                        <p>计划开始时间：{{item.startTime}}</p>
                        <p class="start greenBtn">即将开始</p>
                      </div>
                      <!-- <div class="item_money_time" v-else-if="item.status == '1'">
                        <p>{{item.startTime}}开始</p>
                        <p class="start redBtn">正在进行</p>
                      </div>
                      <div class="item_money_time" v-else>
                        <p>{{item.endTime}}结束</p>
                        <p class="start grayBtn">已结束</p>
                      </div> -->
                      
                    </div>  
                  </div>
                  <div class="item_bottom clearfix">
                      <!-- <p class="item_bottom_p">围观次数：{{item.viewcount}}</p> -->
                      <p class="item_bottom_p">标的数量：{{item.lotsCount}}</p>
                      <div>
                        <p class="item_bottom_btn" @click="goAuctionDetail(item)">标的目录</p>
                      </div>
                  </div>
                </el-card>
            </div>  
          </li>
      </ul>
      <div class="footer_page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="filterObj.page"
          :page-sizes="[10,20, 30, 40,50]" :page-size="filterObj.limit" layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
      </div>
      
    </div>
  </template>
  <script>
  import {djAuctionList} from '@/api/interface'
  import { getUserInfoID,timestampToTime} from '@/utils/auth'
  export default {
    data() {
      return {
        uid:'',
        total: 1,
        stateFoucs:'stateFoucs',
        flagXS:null,
        flagJD:null,
        flagSJ:null,
        aucShapeList:[
          {id:2,val:'同步拍'},
          {id:0,val:'网络拍'},
        ],
        lotsStateList:[
          {id:0,val:'即将开始'},
          {id:1,val:'正在进行'},
          {id:2,val:'已结束'}
        ],
        lotsTimeList:[
          {id:1,val:'未来3天'},
          {id:2,val:'未来7天'},
          {id:3,val:'未来15天'}
        ],
        starttime:'',
        aucData:[],
        filterObj:{
          page:1,
          limit:10,
          auctionPattern:'',
          status:'',
          day:'',
          starttime:'',
          endtime:'',
        },
        description:'',
        emptyShow:false,
      }
    },
    created(){
      var userInfo = getUserInfoID();
        if(userInfo){
            var info = JSON.parse(userInfo);
            this.uid = info.id;
        }
      this.getAuctionList(Object.assign({uid:this.uid}, this.filterObj));
    },
    watch:{
        filterObj:{
            handler(val){
                // console.log('obj',val);
                let newObj = Object.assign({uid:this.uid}, val)
                this.getAuctionList(newObj);
            },
            deep: true
        }
    },
    methods: {
      getAuctionList(obj){
        djAuctionList(obj).then((res) => {
          if(res.data.length > 0){
            this.emptyShow = false;
            res.data.forEach(item => {
              item.start_time =timestampToTime(item.start_time);
            })
            this.aucData=res.data;
            this.total = res.count;
          }else{
            this.emptyShow = true;
            this.description = err.msg;
            this.aucData=[];
          }
          
        }).catch(err =>{
          this.emptyShow = true;
          this.description = err.msg;
          this.aucData=[];
        });
      },
      shapeAll(){
        this.flagXS=null;
        this.filterObj.auctionPattern='';
      },
      stateAll(){ //标的状态的全部
        this.flagJD=null;
        this.filterObj.status='';
      },
      timeAll(){
        this.flagSJ = null;
        this.filterObj.day='';
        this.filterObj.starttime = '';
        this.filterObj.endtime = '';
        this.starttime='';
      },
      shapeListChild(id,index){
        this.flagXS=index;
        this.filterObj.auctionPattern=id;
      },
      stateListChild(id,index){
        this.flagJD=index;
        this.filterObj.status=id;
      },
      timeListChild(id,index){
        this.flagSJ = index;
        this.filterObj.day=id;
      },
      timeSE(val){
        this.filterObj.starttime = val[0];
        this.filterObj.endtime = val[1];
      },
      //拍卖会详情
      goAuctionDetail(item){
        this.$router.push({path:'/actionDjjx/detail',query: {auctionCode:item.auctionCode}});
      },
      // ---------分页
      handleSizeChange(val) {
        this.filterObj.limit = val;
      },
        //----- 分页---------
      handleCurrentChange(val) {
        this.filterObj.page = val;
      }
    }
  }
  </script>
  <style lang="less" scoped>
  @import '@/styles/index.less';
  .auction{
    min-height: 100vh;
    .footer_page{
      margin: 26px 0;
        /deep/ .el-pagination{
            display: flex;
            justify-content: center;
        }
      }
    .lots_type{
      margin: 20px 0px;
      .table{
        position: relative;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        font-size: 12px;
        .tr_border{
            display: flex;
            border-bottom: 1px solid #e6e6e6;
            min-height: 46px;
        }
        .td_type{
            width: 90px;
            border-right: 1px solid #e6e6e6;
            text-align: center;
            padding-top: 14px;
        }
          .td_all{
            display: flex;
            align-items: center;
            color: #3d4246;
            padding: 10px;
            
            .lineNum{
              position: absolute;
              right: 10px;
              .num_b{
                padding: 0 5px;
                color: red;
              }
            }
            .td_all_val{
              text-align: center;
              cursor: pointer;
              padding: 4px 10px;
              margin: 0px 8px;
              border-radius: 14px;
              width: 24px;
              height: 16px;
              line-height: 16px;
              background-color: @base-color;
              color: #fff;
            }
            .ta_all_item{
              width: 982px;
            }
          }
          .tr4{
              display: flex;
          }
  
          
      }
      .all_item_ul{
      display: flex;
      justify-content: space-between;
      flex-wrap:wrap;
      &:after{
          content: '';
          flex: auto;
      }
      li{
          span{
              display: inline-block;
              padding: 2px 10px;
              margin: 1px 6px;
              border-radius: 14px;
          }
          span:hover{
              background-color: @base-color;
              color: #fff;
          }
          .stateFoucs{
              background-color: @base-color !important;
              color: #fff;
          }
      }
  }
      
  }
  
  
  
  
    .pai-item-list{
      display: flex;
      flex-wrap:wrap;
      justify-content: space-between;
      height: 100%;
      &::after{
        content: '';
        width: 588px;
      }
      .pai-item{
        margin-bottom: 10px;
      }
      .link_wrap{
        width: 588px;
        height: 290px;
        background-color: #fff;
        position: relative;
        border-radius: 4px;
          .image {
            img{
              
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            display: block;
            height: 200px;
            border-radius: 4px;
          }
          .item_title{
            // width: 100%;
            width: 586px;
              height: 40px;
              line-height: 40px;
              font-size: 16px;
              font-weight: bold;
              position: absolute;
              top: 161px;
              color: #fff;
              background-color: rgba(18, 18, 18, 0.66);
            }
          .item_content{
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 8px;           
            .item_money{
              
              .item_money_firm{
                font-size: 14px;
                color: rgb(153, 153, 153);
              }
              .item_money_time{
                p{
                  display: inline-block;  
                }
                
                p:last-of-type{
                  font-size: 12px;
                  font-weight: 400;
                  position: absolute;
                  right: 0px;
                  width: 70px;
                  height: 22px;
                  line-height: 22px;
                  text-align: center;
                  border-radius: 12px 0px 0px 12px;
                  color: #fff;
                }
              }
            }
            .item_money{
              p{
                margin-bottom: 4px;
              }
            }
          }
          .item_bottom{
              font-size: 14px;
              color: rgb(153, 153, 153);
              border-top: 1px solid rgb(237, 237, 237);
              display: flex;
              justify-content: space-between;
              align-items: center;
              .item_bottom_p:first-of-type{
                margin-left: 10px;
              }
              .item_bottom_p{
                height: 30px; 
                line-height: 30px;
              }
              div{
                margin-right: 10px;
                display:table-cell;
                vertical-align:middle;
                .item_bottom_btn{
                  height: 24px;
                  line-height: 24px;
                  color: #fff;
                  background-color: @base-color;
                  padding: 0px 10px;
                  border-radius: 4px;
                }
              }
              
            }
        .item_card:hover{
            border: 1px solid @base-color;
          }
          .item_card{
            border-radius: 8px;
          }
  
  
        
        
      }
    }
    .stateAll{
          width: 982px;
      }
  } 
  </style>